<template>
  <div id="cascade_demo1">
    <h3>省市区级联组件</h3>

    <el-form label-width="120px">
      <el-form-item label="地址" prop="address">
        <el-cascader size="large" :options="pcaTextArr"
                     v-model="selectedOptions"
                     @change="handleChangeAddress">
        </el-cascader>
      </el-form-item>
      <el-button type="primary" @click="getAddress">获取地址</el-button>
    </el-form>
  </div>
</template>

<script>
import { pcaTextArr } from "element-china-area-data";
let id = 0;
export default {
  data() {
    return  {
      pcaTextArr,
      // 绑定省市区级联的组件值, 必须是一个数组
      selectedOptions: [],
      // 后台数据
      address: '湖南省-长沙市-天心区'
    }
  },
  methods: {
    // 当级联组件改变时，触发
    handleChangeAddress(value) {
      console.log('value', value)
      // 由于获取的值是一个数组，通常会将数组转化成一个值
      const result = value.join('-')
      console.log('result', result)
    },
    // 获取组件值
    getAddress() {
      alert(this.selectedOptions)
    },
  },
  created() {
    this.selectedOptions = this.address.split('-')
  }
}
</script>

<style>

</style>
